<template>
    <div class="radar-box">
        <div :style="{ width: width + 'px' }" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div :style="{ width: width + 'px', height: height + 'px' }">
            <div class="rhombus-box">
                <div class="rhombus-title"></div>
                <div class="rhombus-content">
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'rhombus',
    components: {
    },
    props: {
        width: {
            type: Number,
            default: 400
        },
        height: {
            type: Number,
            default: 400
        },
        title: {
            type: String,
            default: '预警分析'
        },
    },
    data() {
        return {
        }
    },
    computed: {},
    watch: {},
    methods: {
    },
    created() {
    },
    mounted() { },
}
</script>
  
<style lang='less' scoped>
.rhombus-box {
    .rhombus-title {}

    .rhombus-content {
        position: relative;
        width: 300px;
        height: 30px;
        background-color: skyblue;
        &::before{
            content: "";
            position: absolute;
            top: -0px;
            left: -21px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color:red;
            transform: skewX(-30deg);
        }
    }
}
</style>